Migrate to v5 (Web SDK)

Sequence Kit (v4) is now Web SDK (v5), here are the biggest changes.

React 19 is supported on Web SDK!

Installing new dependencies

All of our hook libraries have been renamed, here are the new dependencies you need to get started with Web SDK:

New

npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
# or
pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
# or
yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

npm install @0xsequence/kit @0xsequence/waas wagmi ethers viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query
# or
pnpm install @0xsequence/kit @0xsequence/waas wagmi ethers viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query
# or
yarn add @0xsequence/kit @0xsequence/waas wagmi ethers viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query

Configuring your app

Main differences when it comes to configuration:

New

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css"; 

import App from "./App";
import { SequenceConnect } from "@0xsequence/connect";
import { SequenceCheckoutProvider } from "@0xsequence/checkout"
import { config } from "./config";

function Dapp() {
  return (
    <SequenceConnect config={config}>
      <SequenceCheckoutProvider>
          <App />
      </SequenceCheckoutProvider>
    </SequenceConnect>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Dapp />
  </React.StrictMode>
);

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

import App from "./App";
import { SequenceKit } from "@0xsequence/kit";
import { KitCheckoutProvider } from "@0xsequence/kit-checkout";
import { config } from "./config";
import '@0xsequence/design-system/styles.css'

function Dapp() {
  return (
    <SequenceKit config={config}>
      <KitCheckoutProvider>
        <App />
      </KitCheckoutProvider>
    </SequenceKit>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Dapp />
  </React.StrictMode>
);

• @0xsequence/kit -> @0xsequence/connect for authentication
• @0xsequence/kit -> @0xsequence/wallet-widget for wallet UI
• @0xsequence/kit-checkout -> @0xsequence/checkout
• no need to manually import the @0xsequence/design-system/styles.css when using @0xsequence/connect
• @0xsequence/connect is compatible with @0xsequence/design-system v2
• KitProvider is now SequenceConnectProvider
• KitCheckoutProvider is now SequenceCheckoutProvider
• KitWalletProvider is now SequenceWalletProvider

Connecting your app

New

import './App.css'
import { useOpenConnectModal } from '@0xsequence/connect'

function App() {
  const {setOpenConnectModal} = useOpenConnectModal()
  
  return (
    <>
      <button onClick={() => setOpenConnectModal(true)}>Connect</button>
    </>
  )
}

export default App

import './App.css'
import { useOpenConnectModal } from '@0xsequence/kit'

function App() {
  const {setOpenConnectModal} = useOpenConnectModal()
  
  return (
    <>
      <button onClick={() => setOpenConnectModal(true)}>Connect</button>
    </>
  )
}

export default App

Tailwind css

Web SDK uses Tailwind v4, if you are using Tailwind v3, you need to upgrade.